<template>
  <div class="PersonalAgent">
    <topTip ref="topTip">
      <div class="tip">{{mes}}</div>
    </topTip>
    <keep-alive>
      <div class="con">
        <div v-show="resultData.length">
          <h4 class="title">个人待办清单明细表</h4>
          <table>
            <tr>
              <th>序号</th>
              <th>名字</th>
              <th>车牌</th>
              <th>违章地点</th>
              <th>违章时间</th>
              <th>办理状态</th>
              <th>在线办理</th>

            </tr>
            <tr v-for="(item,index) in resultData" :key="index">
              <td>{{index+1}}</td>
              <td>{{item.illegalCase.party}}</td>
              <td>{{item.illegalCase.carnumber}}</td>
              <td>{{item.illegalCase.transgressaddress}}</td>
              <td>{{item.illegalCase.transgresstime.substring(0,16)}}</td>
              <td>
                {{
                item.detailList.status===0?"代办清单中":
                item.detailList.status===1?"案件有异议":
                item.detailList.status===2?"案件无异议":
                item.detailList.status===3?"委托书审核中":
                item.detailList.status===4?"生成通知书":
                item.detailList.status===5?"通知书有异议":
                item.detailList.status===6?"通知书无异议":
                item.detailList.status===7?"未签决定书":
                item.detailList.status===8?"出决定书":
                item.detailList.status===9?"已收决定书":
                item.detailList.status===14?"未上传声明":"已缴费"
                }}
              </td>
              <td @click="onlineLoad(item,$event)">办理</td>
            </tr>
          </table>
          <div class="mes">* 对以上案件无异议的,可在线办理并支付罚款.</div>
          <confirmbox text="确认案件有异议"
                      ref="confirm"
                      @confirm="confiremBtn"
                      @cancel="cancelBtn"
                      confirmBtnText="有异议"
                      cancelBtnText="无异议">
          </confirmbox>
        </div>
      </div>
    </keep-alive>
    <div class="noresult" v-show="lodingFlag &&!resultData.length" v-html="noresult"></div>
    <loading v-show="!resultData.length &&!lodingFlag"></loading>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import confirmbox from './confirm/confirm'
  import loading from './loading'
  import topTip from './top-tip/top-tip'
  import {baseurl} from '../base/config'
  import {mapMutations} from "vuex"
  export default {
    name: "PersonalAgent",
    data() {
      return {
        noresult:"请先加入个人代办清单.~~~~",
        codeNub: "",
        resultData: [],
        id: "",
        item: "",
        code: {
          success: 0,
          fail: 1
        },
        result: "",
        bookId: "",
        mes: "",
        status: "",
        flag: "",
        flagTrue: true,
        lodingFlag: false
      }
    },
    created(){
      document.title="个人待办清单"
    },
    mounted() {
      this.fetchData();
    },
    components: {
      confirmbox,
      loading,
      topTip
    },
    methods: {
      ...mapMutations({
        setUser:"SET_USER"
      }),
      //判断status
      swithch(status) {
        switch (status) {
          case 0:
            //代办清单中
            const confirm = this.$refs.confirm;
            confirm.show();
            break;
          case 1:
            //案件有异议
            this.mes = "你对该案件有异议,可到窗口咨询办理.";
            this.$refs.topTip.show();
            this.fetchData();
            break;
          case 2:
            this.$router.push({
              name: "notice",
              params: {
                bookId: this.item.detailList.id
              }
            });
            break;
          case 3:
            // 委托书审核
            this.mes = "委托书审核当中请耐心.";
            this.$refs.topTip.show();
            break;
          case 4:
            //生成通知书
            this.getNotice();
            break;
          case 5:
            //通知书有异议
            //更新status
            this.getNotice();
            this.mes = "你对通知书有异议,可到窗口办理与咨询.";
            this.$refs.topTip.show();

            break;
          case 6:
            //通知书无异议
            this.$router.push({
              name: "declaration"
            });
            break;
          case 7:
            //未签声明
            this.mes = "你已拒绝签声明,请3个工作日后来查询.";
            this.$refs.topTip.show();
            break;
          case 8:
            //决定书
            this.setPageQuery();
            break;
          case 9:
            //接收决定书
            this.setPageQuery();
            break;
          case 10:
            //已缴费
            break;
          case 14:
            //未上传声明
            this.$router.push({
              name:"draw"
            });
            break;
        }
      },
      //生成通知书
      getNotice() {
        this.$router.push({
          name: "Illegality",
          params: {
            id: this.item.illegalCase.code,
            bookId: this.item.detailList.id
          }
        });
      },
      //生成行政处罚通知书
      setPageQuery() {
        this.$router.push({
          name: "PageQuery",
          params: {
            code: this.item.detailList.illegalCase.code
          }
        })
      },
      //在线办理
      onlineLoad(item) {
        this.status = item.detailList.status;
        this.item = item;
        this.swithch(this.status);
        this.setUser(item);
      },
      //无异议
      cancelBtn() {
        console.log(this.item);
        this.checkData(this.item, this.code.success);
      },
      //有异议
      confiremBtn() {
        this.checkdiffData(this.item, this.code.fail)
      },
      //有异议
      checkdiffData: async function (item, code) {
        //console.log(item);
        const url = baseurl + "/entrustAudit/entrustDecide.json";
        let params = {
          detailListId: item.detailList.id,
          status: code
        };
        const res = await http.post(url, params);
        this.mes = res.data.mes || "请到到窗口办理";
        this.$refs.topTip.show();

      },
      //无异议
      checkData: async function (item, code) {
        const url = baseurl + "/entrustAudit/entrustDecide.json";
        let params = {
          detailListId: item.detailList.id,
          status: code
        };
        const res = await http.post(url, params);
        console.log(res);
        this.codeNub = item.detailList.illegalCaseCode;
        console.log(this.codeNub);
        //重新渲染列表
        this.fetchData();
        //如果是公司就跳转上传页面  是个人就提示通知委托书审核当中请耐心
        this.swithch(3);
        //提示是否操作过该动作
        if (res.data.code === 503) {
          this.mes = res.data.msg || "您做过该操作了";
          this.$refs.topTip.show();
          return;
        } else if (res.data.code === 504) {
          this.mes = res.data.msg || "请到窗口办理";
          this.$refs.topTip.show();
          return;
        }
        this.flag = res.data.data.iscompany;
      },
      getMyData() {
        setTimeout(() => {
          this.fetchData();
        }, 700);
      },
      checkiscompany() {
        if (this.flag) {
          this.$router.push({
            name: "notice",
            params: {
              bookId: this.item.detailList.id
            }
          })
        }
      },
      diff() {
        this.$refs.confirm.show();
        setTimeout(() => {
          this.$refs.confirm.hide()
        }, 1000)
      },
      //获取个人清单
      fetchData: async function () {
        const url = baseurl + '/detailList/getDetails.json';
        let params = {};
        const res = await http.get(url, params);
      //  console.log(res);
        if (res.data.code === 0) {
            this.resultData = res.data.data;
            setTimeout(()=>{
              if(!this.resultData.length){
                this.noresult="没有查到你要的信息哦";
                this.lodingFlag = true
              }
            },6000)
        } else {
          this.lodingFlag = true
        }
      }
    }
  }
</script>
<style scoped lang="less" type="text/less">
  .PersonalAgent {
    .tip {
      font-size: .35rem;
      background: #449d44;
      width: 100%;
      height: .8rem;
      text-align: center;
      color: #fff;
      line-height: .8rem;

    }
    .title {
      text-align: center;
      font-size: .5rem;
      margin-top: 1rem;
      margin-bottom: .5rem;
      color: #449d44;
    }

    .con {
      z-index: 10;
      padding: 0 .5%;
      table {
        border: 1px solid #ccc;
        margin: 0 auto;
        font-size: .25rem;
        text-align: center;
      }
      table tr td {
        padding: .03rem;
        border: 1px solid #ccc;
        line-height: .35rem;
        text-align: left;
      }
      table tr th {
        padding: .3rem 0;
        border: 1px solid #ccc;
        /*line-height: 1rem;*/
        text-align: center;
        line-height: .35rem;
        background: #f5f5f5;
        /*background: #ccc;*/
      }
      .mes {
        color: red;
        font-size: .3rem;
        margin-top: 1rem;
        padding: 0 .5rem;
        /*margin-bottom: 1rem;*/

        p {
          line-height: .45rem;
        }
      }
      .btn-content {
        text-align: center;
        margin-top: 2rem;
        .btn {
          width: 2rem;
          height: .8rem;
          border-radius: .2rem;
          outline: none;
          border: none;
          color: #fff;
          font-size: .3rem;
        }
        .btn-link {
          background: #449d44;
        }
        .btn-diff {
          background: #c9302c;
        }
      }

    }
    .noresult {
      text-align: center;
      font-size: .4rem;
      line-height: 6rem;
    }

  }
</style>
